import { useState } from 'react'
import { Tabs } from 'tdesign-react'

import Practice from '@/pages/Practice'
import Tetris from '@/pages/Tetris'
import Questionnaires from '@/pages/Questionnaires'
import Elevator from '@/pages/Elevator'
// import {ThreeAceWin} from '@/pages/ThreeAceWin'
import ThreeAceWin from './pages/ThreeAceWin/ThreeAceWin'

import 'tdesign-react/es/style/index.css'
import '@/styles/index.less'
import '@/styles/clear-default.less'

const { TabPanel } = Tabs

type TabType = 'practice-app' | 'tetris-app' | 'questionnaires-system' | 'elevator-app' | 'three-ace-win-app'

// 组件、函数式组件、react组件
const App = () => {

  const [tabKey, setTabKey] = useState<TabType>('three-ace-win-app')

  return <div className='app'>
    <Tabs
      className='main-tabs'
      placement='left'
      size='medium'
      defaultValue={tabKey}
      onChange={(value) => { setTabKey(value as TabType) }}
    >
      <TabPanel label='调查问卷系统' value='questionnaires-system'>
        <Questionnaires />
      </TabPanel>
      <TabPanel label='学习-练习' value='practice-app'>
        <Practice />
      </TabPanel>
      <TabPanel label='俄罗斯方块' value='tetris-app'>
        <Tetris />
      </TabPanel>
      <TabPanel label='电梯运行' value='elevator-app'>
        <Elevator />
      </TabPanel>
      <TabPanel label='炸金花' value='three-ace-win-app'>
        <ThreeAceWin />
      </TabPanel>
    </Tabs>
  </div>
}

export default App
